<script setup lang="ts">
import { leftBottom } from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import { computed, onMounted, reactive, watch } from "vue";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";
import { useChatStore } from '@/stores/chat.ts';
import dayjs from 'dayjs';

const chatStore = useChatStore();
const chatMessages = computed(() => chatStore.messages);

const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 256,
    limitScrollNum: 4,
  },
  scroll: true,
});

watch(
  chatMessages.value,
  (val) => {
    const ll = [...val].reverse()
    state.list = ll.filter(item => ['查询已签收工单','查询未签收工单', '查询超时工单', '查询即将超时工单', '查询审核中的销单','改派工单', '生成安抚短信', '生成回访话术', '查询销单流程及当前节点', '工单销单'].includes(item.content)).map(item=>{
      return {
        type: item.content,
        time: dayjs(item.timestamp).format('YYYY-MM-DD HH:mm:ss'),
        content: '已生成' + item.content
      }
    });
  },
  { deep: true }
);

const getData = () => {
  leftBottom( { limitNum: 20 })
    .then((res) => {
      if (res.success) {
        state.list = res.data.list;
      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};

const comName = computed(() => {
  if (indexConfig.value.leftBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});
onMounted(() => {
  // getData();
});
</script>

<template>
  <div class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
    <component
      :is="comName"
      :list="state.list"
      v-model="state.scroll"
      :singleHeight="state.defaultOption.singleHeight"
      :step="state.defaultOption.step"
      :limitScrollNum="state.defaultOption.limitScrollNum"
      :hover="state.defaultOption.hover"
      :singleWaitTime="state.defaultOption.singleWaitTime"
      :wheel="state.defaultOption.wheel"
    >
      <ul class="left_boottom">
        <li class="title" v-for="(item, i) in state.list" :key="i">
          <div>【{{item.type}}】</div>
          <div>{{ item.time }} {{ item.content }}</div>
          <!-- <div>【工单详情】</div>
          <div>2025-08-09 10:00 工单已改派至责任人：王甲</div> -->
        </li>
      </ul>
    </component>
  </div>
</template>

<style scoped lang="scss">
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  overflow: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .title {
        display: flex;
        font-size: 16px;
        line-height: 24px;
        :first-child {
          white-space: nowrap;
          color: #58b1ff;
          font-weight: 600;
        }
        :nth-child(2) {
          font-size: 14px;
        }
      }
}
</style>
